


Shortening/Scrolling Fandom Tags and Bookmark Fields Skins

by Moon6Shadow



Category: No Fandom
Genre: Ao3 skins, Blanket Permission Statement Available, Fanwork Research & Reference Guides, Gen, Hiding Tags, Long Live Feedback Comment Project, Reposting is only allowed for historic preservation with credit; not for personal or financial gain., Shortening Tags, tagging
Language: English
Status: Completed
Published: 2021-02-22
Updated: 2021-02-22
Packaged: 2021-03-12 00:21:14
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 1,202
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/29626239
Author URL: https://archiveofourown.org/users/Moon6Shadow/pseuds/Moon6Shadow
Summary: 'A site skin lets you change the way the Archive is presented when you are logged in to your account. You can use work skins to customize the way your own works are shown to others.' - AO3Includes:-Shortening/Scrolling Long Fandom Tag Field since the current public skin Shortening long tag fields skin by Xparrot is awesome for most tags but doesn't scroll Fandom tags. Basically this method allows you to block long tags while still retaining easy access to them if desired.-Shortening/Scrolling Individual Bookmark Fields. Useful for bookmarks with lots of writing in them or if you like taking notes in your bookmarks but unfortunately only works on individual bookmarks, so it won't minimise multiple bookmarks in Bookmark Search.
Kudos: 3





	Shortening/Scrolling Fandom Tags and Bookmark Fields Skins

AO3 is no longer adding user created skins to the public skins list so I've put the coding here instead. Basic information on how to use public work skins or make your own is included below. 

**Shortening/Scrolling Long Fandom Tag Fields skin:**

Shows roughly the first three lines of fandom tags and then hides the rest with a scroll bar. If you want to adjust the amount of content shown just adjust the '4' in 'max-height: 4em;'. I recommend using with the Shortening long tag fields skin by Xparrot if you want to shorten the other tags fields as well.

Feel free to use and adapt. Originally adapted from Shortening long tag fields skin by Xparrot and Blurblings Hide fandom skin by AO3.

CSS
    
    
    li.blurb .header h5.heading,
    li.blurb .fandom {
      max-height: 4em;
      overflow-y: auto;
    }
    

* * *

**Shortening/Scrolling Individual Bookmark Fields skin:**

For shortening long bookmark notes. Useful for bookmarks with lots of writing in them or if you like taking notes in your bookmarks but unfortunately only works on individual bookmarks, so it won't minimise multiple bookmarks in Bookmark Search. If you want to adjust the amount of content shown just adjust the '10' in 'max-height: 10em;'.

Feel free to use and adapt. Coding references used: Blurblings Hide nearly everything skin by AO3 and Shortening long tag fields skin by Xparrot.

CSS
    
    
    #li.blurb dl,
    li.blurb .user {
      max-height: 10em;
      overflow-y: auto;
    }

* * *

**Previewing skins, _partially_ skins that might not be obvious on a random works page:  
**

When you preview a skin on AO3 you will get this:

_You are previewing the skin [skin name]. This is a randomly chosen page._

_Go back or click any link to remove the skin._

_Tip: You can preview any archive page you want by tacking on '?site_skin=[skin_id]' like you can see in the url above._ _  
_

Since the two skins above are designed to scroll things _after_ tag/comment fields reach a certain length and Comment fields don't even turn up on a Works page, you may want to preview these skins on a _different_ page. So in this case you will need to use find a page that _does_ show the thing you are looking to adapt and then use the tip mentioned above.

* * *

**To use public site skin or create a site skins:**

  * Click on your user icon to go to your main page.
  * Click on 'Skins', if not sure where to find it the buttons currently goes: Dashboard, Profile, Preferences, _Skins_
  * To use a public site skin click 'Public Site Skin' or to create a skin click 'Create Site Skin', you can also 'Revert to Default Skin' here as well if you try a skin and then want to revert to normal.



**Public Site Skin:**

This will bring up a page full of lots of publicly available site skins that you can use or preview, or even combine into your own custom skin via using them as a 'Parent Skin'. The skins also come with a screenshot example of how they work, click on a skin's 'avatar' picture to enlarge it.

Skins of note are:

  * [Reversi](https://archiveofourown.org/skins/929) by AO3, which is basically Dark Mode
  * [Shortening long tag fields](https://archiveofourown.org/skins/3756) by Xparrot, 'Puts all tag fields on the Show Works page over a certain length into a scrollbox. The default setting is about 5 lines of tags; the length allowed before it makes a scrollbox can be personalized by changing the "max-height" variable.'
  * [The Screeny Shut It](https://archiveofourown.org/skins/886) by AO3 'Any component you don't care to read, add to the beginning of this code, or remove ones you do want. Remember to separate with a comma!'



There is also Accessibility skins like:

  * [Low Vision Default](https://archiveofourown.org/skins/891) by AO3
  * [ByLine](https://archiveofourown.org/skins/431) by Branch 'Breaks warnings, relationships, characters, and freeform tags into separate groups. by Branch @ao3'
  * [Massive Buttons](https://archiveofourown.org/skins/895) by AO3 'These are really big and bold. You might want to take off the box shadow'
  * [Eyes To The Right](https://archiveofourown.org/skins/900) by AO3 'Right side dash'



[How to: Block a fic & Automatically hide tags of over-tagged fics (without needing to block them manually)](https://archiveofourown.org/works/29556855/chapters/72637362#workskin) by [Smiling_Seshat](https://archiveofourown.org/users/Smiling_Seshat/pseuds/Smiling_Seshat) also covers changing the size of the font via adjusting the code's percentage according to your eyesight, in the last section of chapter one: 'Confused by all the options? Unsure of what to use? Here's the skin I use, with several features.'

**Create Site Skin (The Copy and Paste Version):**

If you have found some skin codes you like then at this point all you really need to do is copy and paste them into the CSS box, give your skin a title and click 'Submit'. This will then take you to another page where you will be able to use 'Preview' to check things are working the way you want them to as well as Edit what you have made if desired. Once you are satisfied hit 'Use' to turn on the skin. The skin will now be operational every time you are logged on unless you switch to another skin or go back into your Skins settings and click 'Revert to Default Skin'.

If there are some publicly available skins you'd like to combine with the skin codes then you can add them via Parent Skins. For example using the 'Shortening/Scrolling Long Fandom Tag Fields skin' code with the 'Shortening long tag fields skin by Xparrot' as a parent skin so _both_ tag fields are shortened.

You could also use creating your own site skins as a way to play around with the codes of skins that are close to but not quite what you want. If your coding knowledge is basic or non-existent I would recommend sticking to preview while doing so. Especially if your experimenting method is anything like mine which is 'delete things and see what does and doesn't vanish in the preview' or you want to mess with hover coding etc. Thought I had hover working just the way I wanted once and then I switched from the main Works page to my main accounts page and the account buttons were everywhere. So it pays to be able to preview those things. Remember _'You can preview any archive page you want by tacking on '?site_skin=[skin_id]' like you can see in the url above.' - AO3_ as mentioned in the 'Previewing Skins' section above.

**Combining skins via Parent skins:**

_You can combine and layer multiple site skins by making one the parent of another. Parent skins are loaded in order so that the style of all the skins can be displayed in that order. For more information on skins, please refer to[the Skins and Interface FAQ](https://archiveofourown.org/faq/skins-and-archive-interface)._

_By default, skins will be loaded after the Archive default style. If you don't want this, you can specify in the "What it does" menu that you want your skin to replace rather than add to the Archive default style. - AO3  
_

  * To combine skins create a site skin
  * Click on the 'Show' beside 'Advanced'.
  * In the 'Parent Skin' section click on 'Add Parent Skin'
  * You can now enter the name of the skin you would like to add/combine with your skin. This could be a public skin or it could even be one of your own skins that you already created.



**Author's Note:**

> Please feel free to spread the word about tagging site skins when you hear people struggling with long tags!
> 
> If you are making a oneshot collection fic or series collection for simplicity in posting or reposting for archival purposes etc. then if possible I recommend trying to split them up via fandoms you commonly write in eg. Marvel Oneshots, Harry Potter Oneshots and Random Fandoms (that aren't in the others) Oneshots. That way things can be a little more easily organised and appealing for AO3 readers, particularly people who might not have followed your content from Tumblr or elsewhere, since that means they can just focus on the fandoms they are interested in rather than getting overwhelmed and off put by a large number of fandom tags. Splitting things up via fandom or perhaps even pairings if you write one or the other often enough could also help split the mass tags up a little without needing to make a oneshot collection for every single fandom.


End file.
